<template>
  <div>
    <div class="customer-info"  v-for="(item, index) in items" ref="testDiv">
      <!--<div class="tag clearfixed">-->
        <!--<span class="info-title">{{item.Name}}</span>-->
        <!--&lt;!&ndash;<span class="more" @click="loadResult('1', index), searchAction(`butclass:${butValue},keywrod: ${Keyword},title:${item.Name},content:More`)">More</span>&ndash;&gt;-->
      <!--</div>-->
      <el-row class="info-content" type="flex" justify="space-between">
        <el-col :span="2" @click.native="loadResult('1', index)">
          <!--<span class="info-title" :title="item.customer_name">{{item.customer_name}}</span>-->
          <el-tooltip class="item" effect="light" :content="item.customer_name" placement="right-end">
            <span class="info-title">{{item.customer_name}}</span>
          </el-tooltip>
        </el-col>
        <el-col :span="5" :offset="2" @click.native="loadResult('1', index)">
          <div v-if="item.group === '0'">
            <!--<p style="margin: 0px; padding: 0px;"><i class="icon iconfont icon-loufang01"></i>Bp</p>-->
            <!--<p style="margin: 0px; padding: 0px;"><i class="icon iconfont icon-loufang01"></i>{{$t('search.ChannelPartner')}}</p>-->
            <p style="margin: 0px; padding: 0px;" v-if="item.customer_category === 'Channel Partner'"><i class="icon iconfont icon-loufang01"></i>{{$t('search.newCustor')}}</p>
            <p style="margin: 0px; padding: 0px;" v-if="item.customer_category === 'Commercial Customer'"><i class="icon iconfont icon-loufang01"></i>{{$t('search.newCustor')}}</p>
          </div>
          <div v-if="item.group === '1'">
            <p style="margin: 0px; padding: 0px;"><i class="icon iconfont icon-loufang101"></i>{{$t('search.Group')}}</p>
          </div>
        </el-col>
        <el-col :span="3" :offset="1" @click.native="loadResult('1', index), searchAction(`butclass:${butValue},keywrod: ${Keyword},title:${item.Name},content:accounts`)">
          <!--<div class="info-one info-item" @click="loadResult('1', index)">-->
          <div class="info-one info-item">
            <!--<img src="../../static/img/icon-account.png" style=" vertical-align: bottom" v-if="item.group === '0'">-->
            <!--<img src="../../static/img/icon-group.png" style=" vertical-align: bottom" v-if="item.group === '1'">-->
            <div v-if="item.group === '0'">
              <p style="margin: 0px; padding: 0px;">ID {{item.customer}}</p>
            </div>
            <div v-if="item.group === '1'">
              <p style="margin: 0px; padding: 0px;">{{item.accounts}}</p>
            </div>
          </div>
        </el-col>
        <el-col :span="3" :offset="2" @click.native="loadResult('2', index), searchAction(`butclass:${butValue},keywrod: ${Keyword},title:${item.Name},content:Machine`)">
          <div class="info-three info-item">
            <!--<img src="../../static/img/icon-machines.png" style=" vertical-align: bottom">-->
            <div>
              <!--<p style="margin: 0px; padding: 0px;">Machine</p>-->
              <p style="margin: 0px; padding: 0px;">{{item.sell_in_qty}}</p>
            </div>
            <!--<span>Machine({{item.sell_in_qty}})</span>-->
          </div>
        </el-col>
        <el-col :span="3" :offset="3" @click.native="loadResult('3', index), searchAction(`butclass:${butValue},keywrod: ${Keyword},title:${item.Name},content:Service`)">
          <div class="info-four info-item">
            <!--<img src="../../static/img/icon-service.png" style=" vertical-align: bottom">-->
            <div>
              <!--<p style="margin: 0px; padding: 0px;">Claim</p>-->
              <p style="margin: 0px; padding: 0px;">{{item.repair_so}}</p>
            </div>
            <!--<span>Service({{item.repair_so}})</span>-->
          </div>
        </el-col>
        <!--<div style="width: 56px; position: absolute; z-index: 99999; right: 0; top: -16px;">-->
          <!--&lt;!&ndash;<img src="../../static/img/bp.png" style=" vertical-align: bottom" v-if="item.group === '0'">&ndash;&gt;-->
          <!--<img src="../../static/img/group.png" style=" vertical-align: bottom" v-if="item.group === '1'">-->
        <!--</div>-->
      </el-row>
    </div>
  </div>
</template>

<script>
  import { getUsername, getPageId, getPageName, getUrl, getKeyword, getbutValue, setsearchItem} from "../../../utils/auth";

  export default {
    data() {
      return {
        resultValue: '',
        searValue: '',
        Keyword:getKeyword(),
        butValue:getbutValue()
      }
    },
    methods: {
      loadResult(n, index) {
        // console.log('修改%%%%%%%%%%')
        // console.log(this.items[index].flag)
        // console.log(index)
// 没改flag之前的        this.resultValue = this.childFlag === 'account' ? this.items[index].Name : this.items[index].customer
        this.resultValue = this.items[index].flag === 'account' ? this.items[index].customer_name : this.items[index].customer
//        this.$router.push({ path: '/searchResult', query: { show: n, search_value: this.resultValue, resultTitle: this.items[index].Name, result_flag: this.childFlag }})
// 没改flag之前的       this.$router.push({ path: '/CustomerProfile/newSearchResult', query: { show: n, search_value: this.resultValue, resultTitle: this.items[index].Name, result_flag: this.childFlag }})

        this.$router.push({ path: './newSearchResult', query: { show: n, search_value: this.resultValue, resultTitle: this.items[index].customer_name, result_flag: this.items[index].flag, bpNumber: this.items[index].customer, bpClaim: this.items[index].repair_so }})
      },
      searchAction(key){
        var _this=this;
        _this.key = key;
        console.log(key);
        setsearchItem(_this.key);
        Avatar.push([
            'track',
            [
              'category',
              'loginSuccess',
              'label',
              {
                url: getUrl(),
                userName: getUsername(),
                parentName: getPageName(),
                childName : _this.key
              },
              0
            ]
          ]);
      }
    },
    props: ['items', 'childFlag', 'searchValue'],
//    mounted() {
//      this.searValue = this.searchValue
//      console.log('转大写前的'+this.searValue)
//      this.searValue = this.searValue.toUpperCase()
//      for(let i = 0; i <this.items.length; i++) {
//        var aDemo = this.searValue.split('');
//        var demoLength = aDemo.length
//        console.log('转大写后的'+this.searValue)
//        if(this.items[i].Name.indexOf(this.searValue) != -1) {
// //          alert('有啊')
//          var qs = this.items[i].Name.indexOf(this.searValue)
//          var jq = this.items[i].Name.slice(qs, qs+demoLength)
//          var aValue = this.items[i].Name.split('')
//          var aValue1 = aValue.slice(0, qs).join('')
//          var aValue2 = aValue.slice(qs+demoLength).join('')
// //        console.log(this.$refs.testDiv[i].getElementsByTagName('span')[0].innerHTML)
//          this.$refs.testDiv[i].getElementsByTagName('span')[0].innerHTML = aValue1+'<span style="color: #f00">'+this.searValue+'</span>'+aValue2
//        }
//      }
//    },
    mounted() {
      this.searValue = this.searchValue
      this.searValue = this.searValue.toUpperCase()
      for(let i = 0; i <this.items.length; i++) {
        var aDemo = this.searValue.split('')
        var demoLength = aDemo.length
        if(this.items[i].customer_name.toUpperCase().indexOf(this.searValue) != -1) {
          var qs = this.items[i].customer_name.toUpperCase().indexOf(this.searValue)
          var jq = this.items[i].customer_name.slice(qs, qs+demoLength)
          var aValue = this.items[i].customer_name.split('')
          var aValue1 = aValue.slice(0, qs).join('')
          var aValue2 = aValue.slice(qs+demoLength).join('')
          var aValue3 = aValue.slice(qs, qs+demoLength).join('')
//        console.log(this.$refs.testDiv[i].getElementsByTagName('span')[0].innerHTML)
//           this.$refs.testDiv[i].getElementsByTagName('span')[0].innerHTML = aValue1+'<span style="color: #f00">'+aValue3+'</span>'+aValue2
          this.$refs.testDiv[i].getElementsByTagName('span')[0].innerHTML = aValue1+'<span style="color: #ff5b00; font-weight:bold;">'+aValue3+'</span>'+aValue2
        }
      }
//      console.log(this.childFlag)
      console.log('!!!!!!!!!!!')
      console.log(this.items)
    },
    updated() {
      this.searValue = this.searchValue
      this.searValue = this.searValue.toUpperCase()
      for(let i = 0; i <this.items.length; i++) {
        var aDemo = this.searValue.split('')
        var demoLength = aDemo.length
        if(this.items[i].customer_name.toUpperCase().indexOf(this.searValue) != -1) {
          var qs = this.items[i].customer_name.toUpperCase().indexOf(this.searValue)
          var jq = this.items[i].customer_name.slice(qs, qs+demoLength)
          var aValue = this.items[i].customer_name.split('')
          var aValue1 = aValue.slice(0, qs).join('')
          var aValue2 = aValue.slice(qs+demoLength).join('')
          var aValue3 = aValue.slice(qs, qs+demoLength).join('')
//        console.log(this.$refs.testDiv[i].getElementsByTagName('span')[0].innerHTML)
//           this.$refs.testDiv[i].getElementsByTagName('span')[0].innerHTML = aValue1+'<span style="color: #f00">'+aValue3+'</span>'+aValue2
          this.$refs.testDiv[i].getElementsByTagName('span')[0].innerHTML = aValue1+'<span style="color: #ff5b00;font-weight:bold;">'+aValue3+'</span>'+aValue2
        }
      }
    }
  }

</script>

<style lang="scss" scoped>
.customer-info {
  position: relative;
  margin-top: 10px;
  border-radius: 6px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, .1);
  border: 1px solid #e6ebf5;
  background-color: #fff;
  color: #444c5a;
  font: 15px Helvetica;
  .info-title {
    position: absolute;
    left: 0;
    /*padding: 10px;*/
    /*max-width: 200px;*/
    max-width: 150px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .more {
    position: absolute;
    right: 1%;
    padding: 10px 50px 10px 10px;
    cursor: pointer;
    color: #409EFF;
    font-weight: bold;
    background: url("../../../../static/img/icon-more.gif") no-repeat 30px center;
  }
  .clearfixed:after {
    content: '';
    display: inline-block;
    clear: both;
  }
  .info-content {
    margin-left: 28px;
    .el-col {
      line-height: 75px;
      /*background-color: #f00;*/
      cursor: pointer;
    }
    .info-item {
      /*background-color: #090;*/
      position: relative;
      display: inline-block;
      height: 75px;
      /*line-height: 100px;*/
      cursor: pointer;
      img {
        width: 60px;
        height: 60px;
        margin-top: 20px;
      }
      span {
        display: inline-block;
        position: relative;
        top: -20px;
      }
    }
    .icon {
      font-size: 30px;
      margin-right: 5px;
      vertical-align: middle;
    }
  }
}
</style>
